
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>如何在 Spring MVC 中处理跨域请求（CORS） - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>如何在 Spring MVC 中处理跨域请求（CORS） - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">CORS（跨域资源共享）的基本工作原理是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">CORS通过在服务器端的HTTP响应中设置特定的响应头来告知浏览器，允许来自哪些域的跨域请求访问其资源。例如，使用 `Access-Control-Allow-Origin` 响应头来指定允许的来源域。</div>
          </div>
          <div class="card-source">来源: 1. 跨域请求的原理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在CORS中，什么是“预检请求”（preflight request），它在什么情况下会被触发？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">预检请求是浏览器在发送“复杂请求”前，自动发送的一个HTTP OPTIONS请求，用于确认服务器是否允许该跨域请求。当请求是`PUT`、`DELETE`方法，或者带有自定义请求头的`POST`请求时，就会触发预检请求。</div>
          </div>
          <div class="card-source">来源: 1. 跨域请求的原理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Spring MVC中，如何为单个控制器方法或特定控制器启用跨域支持？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以通过在控制器或方法级别上使用 `@CrossOrigin` 注解来配置局部的跨域支持。该注解允许你指定 `origins`、`methods`、`allowedHeaders` 等属性。</div>
          </div>
          <div class="card-source">来源: 2. 局部跨域处理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Spring MVC中实现全局跨域配置的首选方法是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">首选方法是创建一个配置类实现 `WebMvcConfigurer` 接口，并重写 `addCorsMappings(CorsRegistry registry)` 方法。在该方法中，可以为整个应用程序的路径（例如 `/**`）统一配置跨域规则。</div>
          </div>
          <div class="card-source">来源: 3. 全局跨域处理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在全局CORS配置中，`maxAge` 方法的作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`maxAge` 方法用于设置预检请求（OPTIONS请求）的缓存时间，单位为秒。通过设置一个较大的值，可以减少浏览器频繁发送预检请求，从而提高性能。</div>
          </div>
          <div class="card-source">来源: 3. 全局跨域处理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在配置CORS时，如果设置了 `allowCredentials(true)`，那么对 `Access-Control-Allow-Origin` 的设置有什么特殊限制？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当 `allowCredentials` 设置为 `true` 时，出于安全考虑，`Access-Control-Allow-Origin` 的值不能是通配符 `*`，必须明确指定一个或多个具体的域名。</div>
          </div>
          <div class="card-source">来源: 4. CORS 配置中的注意事项</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当浏览器控制台报告 “No 'Access-Control-Allow-Origin' header is present on the requested resource” 错误时，通常是什么原因导致的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">这个错误通常意味着服务器端没有正确配置CORS，导致服务器的响应中未包含 `Access-Control-Allow-Origin` 这个响应头，或者该响应头的值与请求来源的域不匹配。</div>
          </div>
          <div class="card-source">来源: 5. 跨域错误处理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当Spring MVC项目集成了Spring Security后，如何确保CORS配置生效？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要在Spring Security的配置类（`SecurityConfig`）中，通过调用 `http.cors()` 来显式启用对Spring MVC中CORS配置的支持，防止其被Spring Security的过滤器链覆盖或阻止。</div>
          </div>
          <div class="card-source">来源: 6. 与 Spring Security 集成的注意事项</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">`Access-Control-Allow-Methods` 这个CORS响应头的作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`Access-Control-Allow-Methods` 用于指定服务器允许客户端在跨域请求中使用的HTTP方法，例如 `GET`, `POST`, `PUT`, `DELETE` 等。</div>
          </div>
          <div class="card-source">来源: 1. 跨域请求的原理</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
